import { getDefaultProps } from '@/libs/props'
import { uuid } from 'vue-uuid'

const state = {
  zoom: 100, // 画布缩放百分比
  type: 'page', // 选中元素类型
  index: -1, // 选中元素索引
  uuid: null, // 选中元素uuid
  counter: 0, // 容器副本命名时避免重名所用的计数器

  originX: 0, // 选中元件的横向初始值
  originY: 0, // 选中元件的纵向初始值
  startX: 0, // 鼠标摁下时的横坐标
  startY: 0, // 鼠标摁下时的纵坐标
  moving: false, // 是否正在移动元件（参考线仅在移动元件时显示）

  activeElement: getDefaultProps(), // 选中对象，要么是元件，要么是页面

  // 模板信息
  page: {
    title: 'demo',
    width: 750,
    height: 550,
    pageWidth: 750,
    pageHeight: 550,
    tempItems: [] // 模板已选项
  },
  optionItems: [], // 可选项

  //模板参数
  tempId: '', // 模板Id
  loading: false, // 是否正在初始化中

  widgetSetting: {} // 模板组件默认属性
}

const mutations = {
  // 初始化页面属性
  initPage(state, pageInfo) {
    state.page = pageInfo
    // 补全默认样式
    let tempItems = pageInfo.tempItems ? pageInfo.tempItems.map(item => {
      let optionItem = {
        ...state.widgetSetting[item.type], ...item,
        style: { ...state.widgetSetting[item.type].style, ...(item.style || {}) }
      }
      return optionItem
    }) : []

    state.page.tempItems = tempItems
  },
  // 初始化可选对象
  initOptionItems(state, options) {
    // 补全默认属性
    let optionsObject = options ? options.map(item => {
      let optionItem = {
        ...state.widgetSetting[item.type], ...item,
        style: { ...state.widgetSetting[item.type].style, ...(item.style || {}) }
      }
      return optionItem
    }) : []

    state.optionItems = optionsObject

  },

  // 初始化选中对象
  initActive(state) {
    state.activeElement = getDefaultProps()
  },

  // 设置 mousemove 操作的初始值
  initmove(state, payload) {
    state.startX = payload.startX
    state.startY = payload.startY
    state.originX = payload.originX
    state.originY = payload.originY
    state.moving = true
  },

  // 选中元件与取消选中
  select(state, payload) {
    state.uuid = payload.uuid
    if (payload.uuid === -1) {
      state.activeElement = getDefaultProps()
      state.type = 'page'
    } else {
      let widget = state.page.tempItems.find(w => w.uuid === payload.uuid)
      state.activeElement = widget
      state.type = widget.type
    }
  },

  // 元件移动结束
  stopmove(state) {
    state.moving = false
  },

  // 移动元件
  move(state, payload) {
    var target = state.activeElement
    var dx = payload.x - state.startX
    var dy = payload.y - state.startY
    var left = state.originX + Math.floor(dx * 100 / state.zoom)
    var top = state.originY + Math.floor(dy * 100 / state.zoom)

    target.left = left > 0 ? left : 0
    target.top = top > 0 ? top : 0
  },

  // 调整元件尺寸
  resize(state, payload) {
    var dx = payload.x - state.startX
    var dy = payload.y - state.startY
    var value

    if (payload.type === 'right') {
      value = state.originX + Math.floor(dx * 100 / state.zoom)
      state.activeElement.width = value > 10 ? value : 10
      return
    }

    if (payload.type === 'down') {
      value = state.originX + Math.floor(dy * 100 / state.zoom)
      state.activeElement.height = value > 10 ? value : 10
      return
    }

    if (payload.type === 'left') {
      var left = state.originX + Math.floor(dx * 100 / state.zoom)
      var width = state.originY - Math.floor(dx * 100 / state.zoom)
      state.activeElement.left = left > 0 ? left : 0
      state.activeElement.width = width > 10 ? width : 10
      return
    }

    if (payload.type === 'up') {
      var top = state.originX + Math.floor(dy * 100 / state.zoom)
      var height = state.originY - Math.floor(dy * 100 / state.zoom)
      state.activeElement.top = top > 0 ? top : 0
      state.activeElement.height = height > 10 ? height : 10
    }
  },

  // 更新元件初始 top 值
  updateSrollTop(state, top) {
    state.top = top
  },

  // 页面缩放
  zoom(state, val) {
    state.zoom = val
  },

  // 删除选中元件
  delete(state, uuid) {
    var type = state.type
    if (type === 'page') return
    let index = 0
    state.page.tempItems.forEach((item, idx) => {
      if (item.uuid === uuid) {
        index = idx
      }
    })
    // 删除元件
    state.page.tempItems.splice(index, 1)

    // 重置 activeElement
    state.activeElement = getDefaultProps()
    state.type = 'page'
    state.uuid = -1
  },

  // 添加组件
  addTempItem(state, { data: data = null, item }) {
    let def = { uuid: uuid.v1() }
    let setting = item // deepClone

    if (data) {
      data.forEach(function(val) {
        state.page.tempItems.push(Object.assign(setting, val, def))
      })
    } else {
      state.page.tempItems.push(Object.assign(setting, def))
    }
  },

  // 替换图片
  replaceImage(state, payload) {
    state.activeElement.width = payload[0].width
    state.activeElement.url = payload[0].url
  },

  // 添加容器背景图
  addContainerBackPic(state, payload) {
    state.activeElement.backPic = payload[0].url
    state.activeElement.backPicUrl = payload[0].src
    state.activeElement.width = payload[0].width
    state.activeElement.height = payload[0].height
  },

  // 添加背景图
  addBackPic(state, payload) {
    state.activeElement.backPic = payload[0].url
    state.activeElement.backPicUrl = payload[0].src
  },

  // 更新数据
  updateData(state, { uuid, key, value }) {
    let widget = state.page.tempItems.find(w => w.uuid === uuid)
    widget[key] = value
  },

  // 设置模板Id
  setTempId(state, id) {
    state.tempId = id
  },

  setLoading(state, flag) {
    state.loading = flag
  },
  // 设置模板默认属性
  setWidgetSetting(state, settingObj) {
    state.widgetSetting = settingObj
  }
}

const actions = {
  // 添加模板项
  addTempItem({ state, commit, store }, item) {
    commit('addTempItem', { item })
    // 设置选中
    commit('select', {
      uuid: state.page.tempItems[state.page.tempItems.length - 1].uuid
    })
  },

  // 初始化模板设计器
  async designerInit({ state, commit, store }, tempInfo) {
    commit('initOptionItems', tempInfo.options)
    commit('initPage', tempInfo.tempValue)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
